import {
  StyleSheet,
  Text,
  View,
  Image,
  Alert,
  ScrollView,
  AppState,
  Platform,
  TouchableOpacity,
} from 'react-native';
import Swiper from 'react-native-swiper';
import NfcManager from 'react-native-nfc-manager';
import {useEffect, useState} from 'react';
import {Props} from 'types/global';
import {getBanner, getVersion} from 'services';
import {checkInstallation} from 'utils/storage';
import {getVersion as version, compareVersion} from 'utils/index';
NfcManager.start();
export default ({navigation}: Props<'Home'>) => {
  const [showVersionDialog, setShowVersionDialog] = useState(false);
  const [show, setShow] = useState(false);
  useEffect(() => {
    const sup = AppState.addEventListener('change', async state => {
      if (state === 'active' && !show) {
        const isEnabled = await NfcManager.isEnabled();
        if (!isEnabled) {
          Alert.alert('提示', '检测您的设备不支持或者未打开NFC功能!', [
            {
              text: '确定',
              onPress: () => {
                sup.remove();
                setShow(true);
              },
            },
          ]);
        } else {
          sup.remove();
        }
      }
    });
    getVersion().then(async data => {
      if (Platform.OS === 'android') {
        const currentVersion = await version();
        const result = compareVersion(currentVersion, data.version_num);
        if (result === -1) {
          setShowVersionDialog(true);
        }
      }
    });
    checkInstallation();
  }, []);
  const [urlList, setUrlList] = useState<{img_url: string}[]>([]);
  const onClick = (
  ) => {    
    navigation.navigate('create', {});
  };
  return (
    <>
      <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
        <View
          style={{
            height: 130,
            marginVertical: 12,
          }}>
          <Swiper autoplay showsPagination={false}>
            {urlList.map((item, index) => {
              return (
                <Image
                  key={index}
                  style={{width: '100%', borderRadius: 8, height: 130}}
                  source={{uri: item.img_url}}></Image>
              );
            })}
          </Swiper>
        </View>

        <View style={styles.product}>
          <Text
            style={{
              marginVertical: 12,
              textAlign: 'center',
              color: '#3D3D3D',
              fontSize: 17,
            }}>
            产品类型
          </Text>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <View style={{...styles.productItem, backgroundColor: '#FEF8F5'}}>
              <TouchableOpacity onPress={onClick}>
                <View
                  style={{
                    alignItems: 'center',
                  }}>
                  <Image
                    style={styles.Image}
                    source={require('assets/images/card.png')}></Image>
                  <Text
                    style={{
                      textAlign: 'center',
                      marginTop: 12,
                      marginBottom: 20,
                      fontSize: 12,
                    }}>
                    电子工牌创作
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </ScrollView>
    </>
  );
};
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F8F9FB',
    paddingHorizontal: 12,
    flex: 1,
    paddingBottom: 20,
  },
  SwiperItem: {},
  product: {
    backgroundColor: 'white',
    borderRadius: 8,
    paddingHorizontal: 12,
  },
  productItem: {
    paddingHorizontal: 28,
    marginBottom: 12,
    paddingTop: 20,
    borderRadius: 8,
    width: '49%',
  },
  Image: {
    width: 80,
    height: 80,
  },
});
